<style scoped>
    .preview {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }

    .preview__title {
        text-align: center;
    }

    .preview__img {
        width: 100%;
        height: 200px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .preview__img img {
        max-width: 100%;
        max-height: 100%;
    }

    .preview__button {
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
    }
    .preview__button:hover{
        color: blue;
    }

    .preview__dialog {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .preview__dialog img {
        max-height: 98%;
        max-width: 100%;
    }

</style>
<template>
    <div class="preview">
        <h4 class="preview__title"><slot></slot></h4>
        <div class="preview__img">
            <img :src="src" alt="">
        </div>
        <p class="preview__button" @dblclick="showPreview"><i class="el-icon-search"></i>双击查看大图</p>
        <div class="preview__dialog" v-if="show" @click="show=false">
            <img :src="src" alt="" @click.stop>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                show: false
            }
        },
        props: {
            src: {
                type: String,
            }
        },
        computed: {},
        methods: {
            showPreview(){
                this.show = true
            }
        },
        mounted(){
        },
        components: {},
        filters: {}
    }
</script>